"use client";

import React from 'react';
import Image from 'next/image';

interface FeatureCardProps {
  title: string;
  description: string;
}

const FeatureCard: React.FC<FeatureCardProps> = ({ title, description }) => {
  return (
    <div className="w-[299px] h-[140px] mb-8">
      <h3 className="font-outfit text-[18px] font-semibold leading-normal text-[#13141D] mb-1">
        <span className="underline underline-offset-4 decoration-[#7058F9]">{title}</span>
      </h3>
      <p className="text-[#4E5469] text-base mt-2">{description}</p>
    </div>
  );
};

const Features: React.FC = () => {
  const features = [
    {
      id: 1,
      title: "Deconstructs viral content intelligently",
      description: "Deeply understands and accurately replicates it, generating high-quality videos in no time."
    },
    {
      id: 2,
      title: "Generates multiple versions in bulk",
      description: "Tailored to different audiences and use cases for efficient distribution."
    },
    {
      id: 3,
      title: "Detects key visuals with AI",
      description: "Automatically selects the best footage, optimizes pacing and visual impact, and enhances editing quality and efficiency."
    },
    {
      id: 4,
      title: "Automates tedious tasks",
      description: "Allowing creators to focus on high-value creativity and maximize content production efficiency."
    }
  ];

  return (
    <section className="py-20 bg-[#F8F8F8]">
      <div className="mx-auto px-[120px]">
        <div className="mb-12">
          <h1 className="font-outfit text-[48px] font-semibold leading-normal text-left">
            <span className="text-[#4E5469]">The AI Video Editor That </span>
            <span className="text-[#7058F9]">Truly Understands Content</span>
          </h1>
          <p className="font-outfit text-[32px] font-normal leading-normal text-left text-[#4E5469] w-[1200px] max-w-full mb-16">
            Precisely Identifying Footage & Efficiently Creating Viral Videos
          </p>
        </div>

        <div className="flex justify-between gap-20">
          {/* 左侧特性列表 */}
          <div>
            <div className="grid grid-cols-2 gap-6">
              {features.map(feature => (
                <FeatureCard 
                  key={feature.id}
                  title={feature.title}
                  description={feature.description}
                />
              ))}
            </div>
          </div>
          
          {/* 右侧视频/图片展示 */}
          <div>
            <div className="w-[610px] h-[350px] bg-gray-400 rounded-lg shadow-sm">
              <div className="relative w-full h-full">
                <Image 
                  src="/images/placeholder.svg" 
                  alt="Product Demo" 
                  fill
                  className="object-cover rounded-lg"
                />
                {/* 右上角装饰元素 */}
                <div className="absolute top-0 right-0">
                  <div className="w-8 h-8 bg-[#7058F9] transform rotate-45 translate-x-2 -translate-y-2"></div>
                  <div className="w-6 h-6 bg-teal-400 rounded-full absolute top-3 right-3"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Features;